<template>
  <div id="app">
    <!-- 使用演示 -->
    <div class="box">
      <div class="btn">
      <!-- <cxy-button round text="默认按钮" />
      <cxy-button text="背景颜色按钮" background="#13ce66" /> 
      <cxy-button text="带图标按钮" icon="el-icon-delete" background="red" color="#fff" @handleClick="openDialog('show')" />
      <cxy-button useSlot background="#30d096"  text="自定义slot插槽">
        自定义slot插槽<i class="el-icon-download"></i>
        </cxy-button> -->

        <cxy-button text="打开弹窗" background="#13ce66" @handleClick="openDialog('show')"></cxy-button>
      <!-- 这是一个弹窗 -->
      <cxy-popup ref="show" title="删除弹窗提示"  @handleConfirm="handleConfirm('show')">
        <!-- 使用插槽传入内容 -->
        <template #container>
          <div style="color: red; font-size: 15px;">
            删除后无法恢复
          </div>
        </template>
      </cxy-popup>

      </div>
      <!-- <cxy-layout>
        <template v-slot:sider>
         侧边栏
        </template>
        <template v-slot:mian>
          主体内容
          <cxy-button text="按钮"></cxy-button>
          <cxy-button text="按钮" color="white" background="#13ce66"></cxy-button>
          <cxy-button size="mini" text="删除" icon="el-icon-delete" background="red" color="#fff" @handleClick="openDialog('show')"></cxy-button>
          <cxy-select title="单选"></cxy-select>
          <cxy-select title="多选" multiple></cxy-select>
          <cxy-pagination></cxy-pagination>
          <cxy-popup ref="show" title="删除"></cxy-popup>
        </template>
      </cxy-layout> -->
    </div>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import cxyButton from './package/cxy-button'
import cxyLayout from './package/cxy-layout'
import cxySelect from './package/cxy-select'
import cxyPagination from './package/cxy-pagination'
import cxyPopup from './package/cxy-popup'
export default {
  name: 'App',
  components: {
    HelloWorld,
    cxyButton,
    cxyLayout,
    cxySelect,
    cxyPagination,
    cxyPopup
  },
  mounted() {
   
  },
  methods: {
    openDialog(type) {
      this.$refs[type].dialogVisible = true; // 显示弹窗
    },
    handleConfirm(type) {
      this.$refs[type].dialogVisible = false; // 显示弹窗
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  height: 100vh;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
}
.btn {
  width: 100%;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
